import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack';

import FlexboxScreen from '../screens/Flexbox'
import FlexDirectionScreen from '../screens/Flexbox/FlexDirection'
import FlexWrapScreen from '../screens/Flexbox/FlexWrap'
import JustifyContentScreen from '../screens/Flexbox/JustifyContent'
import AlignItemsScreen from '../screens/Flexbox/AlignItems'
import AlignContentScreen from '../screens/Flexbox/AlignContent'
import FlexGrowScreen from '../screens/Flexbox/FlexGrow'
import FlexShrinkScreen from '../screens/Flexbox/FlexShrink'
import FlexBasisScreen from '../screens/Flexbox/FlexBasis'
import FlexScreen from '../screens/Flexbox/Flex'

const Stack = createStackNavigator();

export default class FlexboxStack extends Component {
  render() {
    return (
      <Stack.Navigator
        // headerMode={'none'} // 所有 Screen 都不显示 header
        headerShown={true} // 不显示导航头
        screenOptions={{ // 设置 screen 组件的样式
          headerTintColor: 'white',
          headerStyle: { backgroundColor: 'blue' },
        }}
        options={{
          title: 'RN 布局',
          header: ({ scene, previous, navigation }) => {
            const { options } = scene.descriptor;
            const title =
              options.headerTitle !== undefined
                ? options.headerTitle
                : options.title !== undefined
                ? options.title
                : scene.route.name;
          
            return (
              <MyHeader
                title={title}
                leftButton={
                  previous ? <MyBackButton onPress={navigation.goBack} /> : undefined
                }
                style={options.headerStyle}
              />
            );
          }
        }}
      >
        <Stack.Screen
          name="Flexbox"
          component={FlexboxScreen} 
          
          options={{
            title: '弹性布局',
            headerStyle: {
              backgroundColor: 'tomato',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerShown: false,
            headerTitleAlign:"center"
          }}
        />
        <Stack.Screen name="FlexDirection" component={FlexDirectionScreen} />
        <Stack.Screen name="FlexWrap" component={FlexWrapScreen} />
        <Stack.Screen name="JustifyContent" component={JustifyContentScreen} />
        <Stack.Screen name="AlignItems" component={AlignItemsScreen} />
        <Stack.Screen name="AlignContent" component={AlignContentScreen} />
        <Stack.Screen name="FlexGrow" component={FlexGrowScreen} />
        <Stack.Screen name="FlexShrink" component={FlexShrinkScreen} />
        <Stack.Screen name="FlexBasis" component={FlexBasisScreen} />
        <Stack.Screen name="Flex" component={FlexScreen} />
      </Stack.Navigator>
    )
  }
}
